<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>4.http缓存</title>
</head>
<body>
  <!-- 缓存的介绍？ -->
  什么是缓存？访问一个新的网站，从服务端获取所有资源，浏览器或者服务器就能够暂存一份这样的资源
  以后访问没有必要再次请求一次，浪费请求资源。
  为什么需要缓存？减少网络请求体积和数量，让页面加载更快；
  可以被缓存的资源 js css img


  <!-- http缓存策略（强制缓存+协商缓存）图在imgs -->
  1.强制缓存: 初次请求，服务器返回资源和Cache-Control控制强制缓存逻辑等
            浏览器再次请求，会去本地查找未过期的资源，直接使用；
            缓存失效了会再次请求网络资源；

  Cache-Control: Response Headers中;控制强制缓存的逻辑;
  参数: 1.max-age: 设置缓存有效时间，单位秒
        2.no-cache: 该请求资源不用本地强制缓存,交给服务端处理
        3.no-store: 不用强制缓存，也不需要服务端来处理，只是简单粗暴让服务端把资源再传一份
        4.private: 只允许最终用户做缓存，如手机，电脑
        5.public: 允许中间路由或者代理做缓存
        
  了解Expires: 同样在Response Headers中；同样可以控制缓存过期
                已被Cache-Control代替


  2.协商缓存: 服务端缓存策略，服务端根据资源表示判断浏览器缓存是否和服务端资源一致；
              一致则使用缓存就可以不用重新请求资源；
              一致则返回304，不一致返回200和最新资源

  资源标识: 在Response Headers中有两种:
            1.Last-Modified资源的最后修改时间
            2.Etag资源的唯一标识(一个字符串，类似人类的指纹)            
  
  Last-modified和Etag同时存在: 会优先使用Etag
                              Last-modified只能精确到秒级
                              如果资源被重复生成，内容不变，则Etag更精确

  
  <!-- 刷新操作方式，对缓存的印象 -->
  正常操作:强制缓存有效，协商缓存有效
  手动刷新:强制缓存失效，协商缓存有效
  强制刷新:强制缓存失效，协商缓存失效

  
  
</body>
</html>